<template>
  <div>
    <!-- 搜索界面 周可芯同学 -->
    <index></index>
    <div>
      <form action="/">
        <van-search
          v-model="keyword"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch()"
        />
      </form>
    </div>
    <div v-if="isShow">
      <ul class="ui">
        <li v-for="(item, index) in hotsList" :key="index">
          <van-button type="default" round @click="onbtn(index)">
            {{ item.first }}
          </van-button>
        </li>
      </ul>
    </div>
    <div v-else>
      <div class="line">搜索结果</div>
      <!-- 没有搜索结果 -->
      <div v-if="isNull">
        <p class="dialog">暂无搜索结果</p>
        <ul class="ui2">
          <li v-for="(item, index) in hotsList" :key="index">
            <van-button type="default" round @click="onbtn(index)">
              {{ item.first }}
            </van-button>
          </li>
        </ul>
      </div>
      <!-- 搜索结果 -->
      <div v-else>
        <div v-for="(item, index) in searchList" 
        :key="index" 
         class="song-div" 
         @click="broadSong(item)">
          <span :class="['rank', { isred: index < 3 }]" >{{
            Number(index + 1) > 9 ? Number(index + 1) : "0" + Number(index + 1)
          }}</span>
          <!-- 歌曲名 -->
          <span class="song-name">{{ item.name }}</span>
          <span class="broad">
            <van-icon
              name="play-circle-o"
              color="#666"
              size="25"
              class="paly"
            />
          </span>
          <br />
          <span class="artist-name">
            <i class="sq"></i>
            <span v-for="(artist, idx) in item.artists" :key="'artist' + idx">
              {{ artist.name }}
              <!-- 歌手是多人时，添加分割线 -->
              <span
                v-if="item.artists.length > 1 && idx != item.artists.length - 1"
                >/</span
              >
            </span>
            - {{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from "./index.vue";
export default {
  data() {
    return {
      keyword: "",
      hotsList: [],
      // 是否显示热搜词
      isShow: true,
      searchList: [],
      //所点击歌曲的id名
      onSongId: "",
      //搜索结果是否为空
      isNull: true,
    };
  },
  /*  组件*/
  components: { index },

  created() {
    this.getHot();
  },
  methods: {

    // 获取热搜词
    getHot() {
      this.$http
        .get("/search/hot")
        .then((res) => {
          // console.log(res.data.result.hots);
          this.hotsList = res.data.result.hots;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 搜索
    onSearch() {
      // this.$http('search/?keywords='+word)
      if (this.keyword == "") {
        this.isNull = true;
        this.isShow = false;
      } else {
        this.$http("search", { params: { keywords: this.keyword } })
          .then((res) => {
            // 隐藏热搜词，显示搜索结果
            this.isShow = false;
            this.isNull = false;
            this.searchList = res.data.result.songs;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    //点击按钮，搜索框中得到关键词
    onbtn(index) {
      this.keyword = this.hotsList[index].first;
    },

    //播放歌曲
    broadSong(e) {
        this.$router.push("/play/" + e.id);
    },
  },
};
</script>

<style scoped>
.ui {
  list-style: none;
  padding: 10px;
}
.ui li {
  padding: 5px;
  float: left;
}
.btn {
  background-color: #f4f4f4;
}
.ui2 {
  list-style: none;
  padding: 10px;
  padding-top: 80px;
}
.ui2 li {
  padding: 5px;
  float: left;
}

.line {
  height: 20px;
  line-height: 20px;
  border-left: 2px solid #f00;
  margin-top: 10px;
  padding-left: 10px;
  font-size: 18px;
}

.song-div {
  border-bottom: 1px solid #f4f4f4;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.song-name {
  font-size: 16px;
  padding-top: 0px;
}
.artist-name {
  font-size: 12px;
  color: #666;
}
.paly {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.sq {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-top: 10px;
  background-image: url("../../static/img/index_icon_2x.png");
  background-size: 186.75px 109.125px;
  background-position: 0 0;
}
.dialog {
  width: 100%;
  height: 10vh;
  top: 220px;
  position: fixed;
  font-size: 20px;
  text-align: center;
  z-index: 6;
}
.img {
  color: #f4f4f4;
}
.rank {
  top: 0;
  left: 8px;
  font-size: 18px;
  /*line-height: 63px;*/
}
.isred {
  color: #f00;
}
.broad {
  right: 0;
  position: relative;
}
</style>